<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  </head>
  <body>
    <input type="file" value="上传文件" multiple id="inp" />
    <div id="id">aaa</div>
    <!-- <script>
      // 图片切片
      function imgSlice(files, readFile) {
        readFile.readAsDataURL(files);
        // （一定要在转化后的load执行完后进行操作，要不然会报错，因为转化数据是需要时间的）
        let num = 0;
        readFile.onload = function (e) {
          console.log(files, 123);
          // 保存文件大小
          const length = e.target.result;
          //   创建buffer切割数组
          let slice = [];
          //   下标
          //   循环进行切割，1. i变量每次变化为规定值累加（不能大于文件大小）
          //   console.log(length)
          console.log(e.target.result);
          for (let i = 0; i < length.length; i += 1024) {
            // 保存切割buffer数组
            slice.push(e.target.result.slice(i, 1024 + i));
            const formdata = new FormData();
            // 切片
            formdata.append("data", slice[num]);
            console.log(formdata.get("data"));
            // 文件名
            formdata.append("filename", files.name);
            // 总切片数量
            formdata.append("size", Math.ceil(length.length / 1024));
            // 当前切片
            formdata.append("currutSize", num);
            axios.post("/file", formdata);
            // 下标变化
            num++;
          }
        };
      }
      function otherSlice(files, readFile) {
        readFile.readAsText(files);
        // （一定要在转化后的load执行完后进行操作，要不然会报错，因为转化数据是需要时间的）
        let num = 0;
        readFile.onload = function (e) {
          console.log(e.target.result, 123);
          // 保存文件大小
          const length = e.target.result;
          //   创建buffer切割数组
          let slice = [];
          //   下标
          //   循环进行切割，1. i变量每次变化为规定值累加（不能大于文件大小）
          for (let i = 0; i < length.length; i += 1024) {
            // 保存切割buffer数组
            slice.push(e.target.result.slice(i, 1024 + i));
            const formdata = new FormData();
            // 切片
            formdata.append("data", slice[num]);
            // console.log(formdata.get("data"));
            // 文件名
            formdata.append("filename", files.name);
            // 总切片数量
            formdata.append("size", Math.ceil(length.length / 1024));
            // 当前切片
            formdata.append("currutSize", num);
            axios.post("/file", formdata);
            // 下标变化
            num++;
          }
        };
      }

      //   判断文件类型
      function ctype(FileName) {
        let FileType;
        if (FileName.indexOf(".png") !== -1) {
          FileType = "img";
        } else if (FileName.indexOf(".jpg") !== -1) {
          FileType = "img";
        } else if (FileName.indexOf(".svg") !== -1) {
          FileType = "img";
        } else if (FileName.indexOf(".gif") !== -1) {
          FileType = "img";
        } else if (FileName.indexOf(".jpeg") !== -1) {
          FileType = "img";
        } else if (FileName.indexOf(".AVI") !== -1) {
          FileType = "viod";
        } else if (FileName.indexOf(".MOV") !== -1) {
          FileType = "viod";
        } else if (FileName.indexOf(".QT") !== -1) {
          FileType = "viod";
        } else if (FileName.indexOf(".ASF") !== -1) {
          FileType = "viod";
        } else if (FileName.indexOf(".MPEG") !== -1) {
          FileType = "viod";
        } else {
          FileType = "text";
        }
        return FileType;
      }
      const inp = document.querySelector("#inp");
      inp.onchange = function (e) {
        // 创建fileReader读取file
        const readFile = new FileReader();
        // 事件函数上传文件的信息
        const files = e.target.files[0];
        const type = ctype(files.name);
        if (type === "img" || type === "viod") {
          imgSlice(files, readFile);
        } else {
          otherSlice(files, readFile);
          console.log(1122);
        }
        // 把文件信息转化为buffer数组
        // 失败时被调用
        readFile.onerror = function (e) {
          console.log(e);
          console.log("失败第几个切片：");
        };
        // 读取时被调用
        readFile.onprogress = function (e) {
          console.log(e);
          console.log("第几个切片：");
        };
      };
    </script> -->
  </body>
</html>
